import {
  AppstoreOutlined,
  HomeOutlined,
  SettingOutlined,
  createFromIconfontCN,
} from "@ant-design/icons";
import { Menu } from "antd";
import { useState } from "react";
import { Link } from "react-router-dom";

const IconFont = createFromIconfontCN({
  scriptUrl: "//at.alicdn.com/t/c/font_4148109_l4tunggla6.js",
});
const items = [
  {
    label: <Link to="/">首页</Link>,
    key: "messages",
    icon: <HomeOutlined />,
    style: { paddingInline: "9.5%", textAlign: "center" },
  },
  {
    label: <Link to="/list">列表</Link>,
    key: "menu",
    icon: <AppstoreOutlined />,
    disabled: false,
    style: { paddingInline: "9.5%", textAlign: "center" },
  },

  {
    label: <Link to="/user">用户</Link>,
    icon: <IconFont type="icon-user" />,
    key: "alipay",
    style: { paddingInline: "9.5%", textAlign: "center" },
  },
  {
    label: "关于",
    key: "configuration",
    icon: <SettingOutlined />,
    style: { paddingInline: "9.5%", textAlign: "center" },
    children: [
      {
        type: "group",
        label: "关于",
        children: [
          {
            label: <Link to="/about">关于我们</Link>,
            key: "setting:1",
          },
          // {
          //   label: "设置二",
          //   key: "setting:2",
          // },
        ],
      },
      // {
      //   type: "group",
      //   label: "第二组",
      //   children: [
      //     {
      //       label: "设置三",
      //       key: "setting:3",
      //     },
      //     {
      //       label: "设置四",
      //       key: "setting:4",
      //     },
      //   ],
      // },
    ],
  },
];
const Nav = () => {
  const [current, setCurrent] = useState("mail");
  const onClick = (e) => {
    console.log("click ", e);
    setCurrent(e.key);
  };
  return (
    <Menu
      className=" bg-slate-100/50"
      style={{ height: "100%", flex: "1" }}
      onClick={onClick}
      selectedKeys={[current]}
      mode="horizontal"
      items={items}
    />
  );
};
export default Nav;
